<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>H2 and DK Page</title>
		
		<!--  css -->
		<link rel="stylesheet" type="text/css" href="css/frame.css">
		<link rel="stylesheet" type="text/css" href="css/sub.css">
		<!--  css -->
		
		<!-- js -->
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<!-- js -->
		
		<script type="text/javascript">
			$(document).ready(function(){
				
			});
			function ajaxpage(url, target){				
				$.ajax({
					url: url,
					success: function(data) {
						$('#'+target).html(data);
						}
				});
			}
		</script>
		
	</head>
	
	<body>
		<header id="mainHeader">
			<nav>
				<p>타이틀 메뉴가 들어갈 자리 백그라운드 이미지도 없고~</p>
				<ul id="mainMenu">
					<li onclick="ajaxpage('board.do', 'mainArticle')">${title}</li>
					<li onclick="ajaxpage('view/board/test2.jsp', 'mainArticle')">다음</li>
					<li onclick="ajaxpage('view/board/test3.jsp', 'mainArticle')">네이버</li>
					<li onclick="ajaxpage('view/board/test4.jsp', 'mainArticle')">네이트</li>
					<li onclick="ajaxpage('view/board/test5.jsp', 'mainArticle')">야후</li>
				</ul>
			</nav>
		</header>
		<div id="body">
			<article id="mainArticle">
				<ul>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>=============================</li>
					<li>====================================================================================================================================================================================================================================================</li>
				</ul>	
			</article>
			<aside id="mainAside">
				<ul>
					<li>사이드 바1</li>
					<li>사이드 바2</li>
					<li>사이드 바3</li>
				</ul>
			</aside>
		</div>
		<footer id="mainFooter">
			푸터가 들어가는 자리입니다. 별 내용도 없고 쓸 내용도 없다.
		</footer>
	</body>
</html>